<template>
  <div class="ShoppingMall">
    <!-- 搜索栏 -->
    <!-- <div class="search-bar">
      <van-row>
        <van-col span="3" class="location-icon">
          <img :src="iconImage" alt="" />
        </van-col>
        <van-col span="16">
          <input type="text" class="inputSearch" />
        </van-col>
        <van-col span="5" class="buttonSearch">
          <van-button type="default" size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div> -->

    <!-- 头部nav -->
    <qing-nav-bar title="商城首页"></qing-nav-bar>
    <!-- 轮播图 -->
    <div class="swiper-area">
      <van-swipe :autoPlay="1000" :width="375" :height="200">
        <van-swipe-item v-for="item in bannerPicArray" :key="item._id" @click="goGoodsDetail(item)">
          <img v-lazy="item.URL" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品的分类 -->
    <!-- <div class="type-area">
      <div v-for="(cate, index) in category" :key="index">
        <img v-lazy="cate.image" alt="" />
        <div>{{ cate.comment }}</div>
      </div>
    </div> -->

    <!-- 商品的推荐 -->
    <!-- <div class="recommend-area">
      <div class="recommend-title">商品推荐</div>
      <div class="recommend-body">
        <swiper-container :slides-per-view="3">
          <swiper-slide v-for="item in recommendGoods" :key="item.id">
            <div class="recommend-item">
              <img :src="item.image" alt="" />
              <div>{{ item.goodsName }}</div>
              <div>￥{{ item.price }} ￥{{ item.mallPrice }}</div>
            </div>
          </swiper-slide>
        </swiper-container>
      </div>
    </div> -->

    <!-- 商品楼层的数据 -->
    <!-- <floor-component
      :floorData="floor1"
      :floorTitle="floor_title"
    ></floor-component>
    <floor-component
      :floorData="floor2"
      :floorTitle="floor_title"
    ></floor-component>
    <floor-component
      :floorData="floor3"
      :floorTitle="floor_title"
    ></floor-component> -->

    <!-- 热卖商品/ -->
    <div class="hot-area" style="padding-left: 10px;">
      <div class="hot-title">
        <h2 style="text-align: center;">热卖商品</h2>
      </div>
      <div class="hot-goods">
        <van-list gutter="20">
            <template v-if="hotGoods.length > 0">
              <van-col span="12" v-for="(item, index) in hotGoods" :key="index">
                <goods-info :good="item" ></goods-info>
              </van-col>
            </template>
            <template v-else>
              <van-loading color="#1989fa" />
            </template>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getShoppingMallInfo, getBanner, getGoodsListByCategorySubID} from '@/api/api.config'
import { register } from 'swiper/element/bundle'
import floorComponent from '@/components/component/floorComponent.vue'
import goodsInfo from '@/components/component/goodsInfoComponent.vue'
import QingNavBar from '@/components/component/qingNavBar'
import request from '@/utils/request'
import newOne from '@/assets/images/new_one.jpg'
import newTwo from '@/assets/images/new_two.jpg'
register()
export default {
  name: 'ShoppingMall',
  components: {
    floorComponent,
    goodsInfo,
    QingNavBar
  },
  data() {
    return {
      loading: true,
      iconImage: require('@/assets/images/location.png'),
      bannerPicArray: [], // 轮播图
      category: [], // 分类
      recommendGoods: [], // 推荐商品
      floor1: [], // 楼层1数据
      floor2: [], // 楼层2数据
      floor3: [], // 楼层3数据
      floor_title: '', // 楼层标题
      hotGoods: [], // 热卖商品
      params: {
        pageSize: 10,
        page: 1,
      },
      newOne: newOne,
      newTwo: newTwo,
    }
  },
  created() {
    // request('/goods/test?pageSize=10&page=1').then((data) => {
    //   this.category = data.result.category
    //   this.recommendGoods = data.result.recommendGoods
    //   this.floor1 = data.result.floor1
    //   this.floor2 = data.result.floor1
    //   this.floor3 = data.result.floor1
    //   this.floor_title = data.result.floor_title
    //   this.hotGoods = [
    //     {
    //       goodsId: "64314973dae8e01fe8b3463d",
    //       image:
    //         'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/newGoods/new_one.jpg',
    //       name: '五粮液仙林生态吾调果酒蜜桃+菠萝套盒16.8度375mL*2瓶果味小酒',
    //       mallPrice: 198,
    //       price: 68,
    //     },
    //     {
          
    //       goodsId: '64314973dae8e01fe8b3463b',
    //       image:
    //         'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/newGoods/new_two.jpg',
    //       name: '厂家直销 昆竹青梅酒低度果酒梅子酒本格梅酒聚会送礼 梅酒专区',
    //       mallPrice: 23,
    //       price: 23,
    //     },
    //     {
    //       goodsId: "64314973dae8e01fe8b3463c",
    //       image:
    //         'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/newGoods/new_three.jpg',
    //       name: '宜宾五粮液仙林生态酒业青梅酒微醺果酒10度375ml*6瓶整箱优惠',
    //       mallPrice: 298,
    //       price: 298,
    //     },
    //     {
    //       goodsId: "64314973dae8e01fe8b3463a",
    //       image:
    //         'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/newGoods/new_four.jpg',
    //       name: '五粮液仙林生态吾调果酒青梅+石榴套盒10度375mL*2瓶果味小酒',
    //       mallPrice: 198,
    //       price: 68,
    //     },
    //   ]
    // })
    getBanner().then((res) => {
        this.bannerPicArray = res.data.message
    }).catch((err) => {
        console.log(err)
    }),
    // 销量大于1000的，才会显示到热卖商品
    getGoodsListByCategorySubID().then(res => {
      this.hotGoods = res.data.message.filter(item => {
        return item.SALES_COUNT > 1000
      }).map(value => {
        return {
          goodsId: value._id,
          image: value.IMAGE1,
          name: value.NAME,
          mallPrice: value.PRESENT_PRICE,
          price: value.ORI_PRICE,
        }
      })
    })
    
  },
  watch: {
    hotGoods(newVal, oldVal) {
      if (newVal.length > 0) {
        this.loading = false
      }
    }
  },
  methods: {
    goGoodsDetail(item) {
      this.$router.push({
        path: '/goods',
        query: { goodsId: item._id },
      })
    }
  },
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #07c160;
  margin-bottom: 10px;
  ::v-deep .van-nav-bar__title  {
    color: white;
    font-weight: 700;
  }
}
.swiper-area {
  margin-top: 46px;
}
.ShoppingMall {
  height: 100%;
  background-color: #f5f7f9;
  overflow: auto;
  .search-bar {
    height: 49px;
    background-color: #e5017d;
    line-height: 2.2rem;
    overflow: hidden;
    .location-icon {
      padding-top: 0.2rem;
      padding-left: 0.3rem;
      img {
        width: 85%;
      }
    }
    .inputSearch {
      height: 80%;
      border: none;
      border-bottom: 1px solid #fff;
      background-color: #e5017d;
    }
    .buttonSearch {
      text-align: left;
      .van-button--mini {
        vertical-align: middle;
      }
    }
  }
  .van-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 商品分类
  .type-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 10px 0;
    border-radius: 5px;
    font-size: 16px;
    > div {
      flex: 20%;
    }
  }
  // 商品推荐
  .recommend-area {
    margin-top: 0.3rem;
    background-color: #fff;
  }
  .recommend-title {
    border-bottom: 1px sold #eee;
    font-size: 14px;
    padding: 0.2rem;
    color: #e5017d;
    text-align: left;
  }
  .recommend-body {
    border-bottom: 1px solid #eee;
  }
  .recommend-item {
    width: 99%;
    border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
  }
  .hot-area {
    text-align: center;
    font-size: 14px;
    height: 1.8rem;
    line-height: 1.8rem;
  }
}
</style>
